{% extends "layout.html" %}
{% block content %}
<h2>Question Bank Manager</h2>
<hr>
<form method="POST">
    <div class="mb-3">
        <label>Question Text</label>
        <input type="text" name="question" class="form-control" required>
    </div>
    <div class="row">
        <div class="col"><input type="text" name="option_a" class="form-control" placeholder="Option A" required></div>
        <div class="col"><input type="text" name="option_b" class="form-control" placeholder="Option B" required></div>
    </div>
    <div class="row mt-2">
        <div class="col"><input type="text" name="option_c" class="form-control" placeholder="Option C" required></div>
        <div class="col"><input type="text" name="option_d" class="form-control" placeholder="Option D" required></div>
    </div>
    <div class="mb-3 mt-3">
        <label>Correct Answer (A, B, C, or D)</label>
        <select name="correct_answer" class="form-select">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Add Question</button>
</form>

<h4 class="mt-5">Existing Questions</h4>
<ul class="list-group">
    {% for q in questions %}
        <li class="list-group-item">{{ q['question_text'] }} (Ans: {{ q['correct_answer'] }})</li>
    {% endfor %}
</ul>
<a href="/" class="btn btn-secondary mt-3">Back to Home</a>
{% endblock %}